<template>
    <div class="detail-wrap">
        <van-icon @click="toGoods" class="arrow-left" name="arrow-left" />
        <img class="head-img" :src="detailData.imgUrl" alt="">
        <div class="goods-content">
            <h1>{{ detailData.name }}</h1>
            <p>
                <span class="money">月售{{ detailData.sellCount }}份</span>
                <span class="comment">好评率{{ detailData.rating }}%</span>
            </p>
            <div class="money-car df jcsb">
                <div class="money-box df">
                    <div class="new-price">
                        <span class="money-icon">￥</span>
                        <span>{{ detailData.price }}</span>
                    </div>
                    <div class="price">
                        ￥{{ detailData.price + 2 }}
                    </div>
                </div>
                <div class="car" @click="ADD_ACOUNT(detailData.id)">
                    <van-icon name="shopping-cart" color="#000" />
                    <span>加入购物车</span>
                </div>
            </div>
        </div>

        <div class="goods-introduce">
            <h1>商品介绍</h1>
            <p>{{ detailData.goodsDesc }}</p>
        </div>
        <div class="shop-car-content">
            <shop-car></shop-car>
        </div>
    </div>
</template>

<script>
import ShopCar from '@/components/ShopCar.vue';
import { mapMutations } from 'vuex';
export default {
    components: {
        ShopCar
    },
    data() {
        return {
            detailData: {}
        }
    },
    created() {
        this.detailData = this.$route.params
        console.log(this.detailData);
    },
    methods: {
        ...mapMutations('shop', ['ADD_ACOUNT']),
        toGoods() {
            this.$router.go(-1)
        }

    },
}
</script>

<style lang="scss" scoped>
.detail-wrap {
    height: 100%;

    .shop-car-content {
        position: fixed;
        left: 5px;
        right: 5px;
        bottom: 10px;

    }

    .arrow-left {
        position: absolute;
        top: 15px;
        left: 10px;
        font-size: 20px;
        color: #999;
    }

    background-color: #f4f5f7;

    .head-img {
        height: 260px;
        width: 100%;
    }

    .goods-content {
        background-color: #fff;
        padding: 20px 10px;

        h1 {
            font-size: 22px;
            font-weight: bold;
        }

        p {
            font-size: 14px;
            color: #999;
            margin: 10px 0;

            .money {
                margin-right: 15px;
            }
        }

        .money-car {
            .money-box {
                align-self: flex-end;

                .new-price {
                    font-size: 30px;
                    color: #f45026;

                    span {
                        font-weight: bold;
                    }

                    .money-icon {
                        font-size: 12px;
                    }
                }

                .price {
                    color: #999;
                    text-decoration: line-through;
                    display: flex;
                    align-self: flex-end;
                    font-size: 16px;
                    margin-left: 20px;
                }
            }

            .car {
                padding: 10px 20px;
                background-color: #ffc300;
                border-radius: 20px;
                font-size: 16px;

                span {
                    margin-left: 5px;
                }
            }
        }
    }

    .goods-introduce {
        background-color: #fff;
        margin-top: 20px;
        padding: 20px 10px;

        h1 {
            font-size: 22px;
        }

        p {
            font-size: 16px;
            margin-top: 20px;

        }
    }
}
</style>